<template>
  <section class="table-wrap">
    <el-table :data="
        tableData.slice(
          (params.page - 1) * params.size,
          params.page * params.size
        )
      "
              border
              class="table-class-list">
      <template v-for="(item, index) in tableHeaderData">
        <el-table-column v-if="item.type === 'contractNo'"
                         :key="item.orderId"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`">
          <template slot-scope="scope">
            <span>{{ scope.row.contractNo }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'toInfo'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true"
                         :width="`${colWidth}px`">
          <template slot-scope="scope">
            <waybill-consignee-sender-info :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'toAddress'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <waybill-consignee-sender-address :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'fromInfo'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <ShipmentSenderInfo :row="scope.row"
                                :value="infoValues(scope.row)"
                                class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'fromAddress'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <ShipmentSenderAddress :row="scope.row"
                                   :value="addressValues(scope.row)"
                                   class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'waybillInfo'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true"
                         :width="`${colWidth}px`">
          <template slot-scope="scope">
            <order-info :row="scope.row"
                        name="oneBillWayinfo" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'trackType'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`">
          <template slot-scope="scope">
            <car-info v-if="
                scope.row.transportRequirement &&
                scope.row.transportRequirement.transportMode != 1
              "
                      :row="scope.row.transportRequirement" />
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column v-else
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`">
        </el-table-column>
      </template>
    </el-table>
    <el-pagination class="pagination"
                   :current-page="params.page"
                   :page-size="params.size"
                   :total="total"
                   :page-sizes="[5, 10, 15, 20]"
                   layout="total, sizes, prev, pager, next, jumper"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange">
    </el-pagination>
  </section>
</template>

<script>
import WaybillConsigneeSenderAddress from "@components/table/column/WaybillConsigneeSenderAddress.vue";
import WaybillConsigneeSenderInfo from "@components/table/column/WaybillConsigneeSenderInfo.vue";
import ShipmentSenderInfo from "@components/table/column/ShipmentSenderInfo.vue"
import ShipmentSenderAddress from "@components/table/column/ShipmentSenderAddress.vue"
import OrderInfo from "@components/table/column/OrderInfo.vue";
import CarInfo from "@components/table/column/CarInfo";
export default {
  name: "ChildList",
  components: {
    WaybillConsigneeSenderInfo,
    WaybillConsigneeSenderAddress,
    ShipmentSenderInfo,
    ShipmentSenderAddress,
    OrderInfo,
    CarInfo
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    colWidth: {
      type: Number
      // default: () => 158
    }
  },
  data () {
    return {
      visible: false,
      tableHeaderData: [
        { label: "合同编号", type: "contractNo" },
        { label: "发货方信息", type: "fromInfo" },
        { label: "发货地址", type: "fromAddress" },
        { label: "收货方信息", type: "toInfo" },
        { label: "收货地址", type: "toAddress" },
        { label: "运单信息", type: "waybillInfo" },
        { label: "车型信息", type: "trackType" },
        { label: "发货时间", type: "fromTime" },
        { label: "要求到货时间", type: "toTime" }
      ],
      paramsData: ["orderId", "status"],
      selectData: [],
      params: {
        size: 5,
        page: 1
      }
    };
  },
  computed: {
    total () {
      return this.tableData?.length || 0;
    },
    infoValues () {
      return row => {
        return {
          contactName: row.fromContactName,
          contactMobile: row.fromContactMobile
        }
      }
    },
    addressValues () {
      return row => {
        return {
          province: row.fromProvince,
          city: row.fromCity,
          district: row.fromDistrict,
          address: row.fromAddress
        }
      }
    }
  },
  created () {
    console.log("tableData", this.tableData);
  },
  methods: {
    handlePopover () {
      this.visible = !this.visible;
    },
    // 分页数量改变
    handleSizeChange (value) {
      this.params.size = value;
    },
    // 当前页数改变
    handleCurrentChange (value) {
      this.params.page = value;
    }
  }
};
</script>

<style lang="scss" scoped>
.table-wrap {
  // height: 500px;
  // overflow: hidden;
  // padding: 10px 0px;
  ::v-deep .el-table--small {
    margin-bottom: 20px;
  }
  ::v-deep .el-input__inner {
    height: 28px !important;
  }
}
.table-class-list {
  max-height: 480px;
  overflow-y: auto;
}
.opertion {
  color: var(--prev-icon-color-orange);
}
.total {
  font-size: 14px;
  font-weight: 400;
  color: var(--prev-color-text-ashes);
  .amountSty {
    display: flex;
    align-items: center;
    line-height: 40px;
    margin: 10px 0;
  }
  .fontSty {
    color: var(--prev-icon-color-orange);
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
